<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
      <div>
        <div v-for="(item, index) in carts" :key="index">
          <van-swipe-cell>
            <van-card
              :num="item.count"
              :price="item.sell_price"
              :title="item.title"
              :thumb="item.thumb_path"
            >
              <div slot="footer">
                <van-stepper v-model="item.count" @change="ChangeInput($event,item.id)" />
              </div>
            </van-card>
            <van-button
              slot="right"
              square
              text="删除"
              type="danger"
              class="delete-button removebtn"
              @click="removeGoods(item.id)"
            />
          </van-swipe-cell>
        </div>
      </div>
      <!-- 按需渲染购物车页面  不存在商品，显示图片 -->
      <div v-show="carts.length===0" class="goodsImg">
        <img class="logo" src="../assets/car.jpg" alt />
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" block @click="buyGoods()">点我，快去买买买</van-button>
      </div>
    </van-pull-refresh>
    <!-- 底部提交订单 -->
    <div class="order_wrap">
      <span>
        合计：
        <em>¥ {{totalPrice || 0.00.toFixed(2)}}</em>
      </span>
      <van-button type="danger">提交订单</van-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import NavBar from "../components/navBar";
export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 商品数组
      carts: [],
      // 商品id字符串
      ids: "",
      // 总价格
      totalPrice: "",
      // 下拉刷新
      isDownLoading: false
    };
  },
  created() {
    this.getCart();
  },
  methods: {
    ...mapMutations(["count", "addCart", "removeCart"]),
    async getCart() {
      // 1.获取缓存中的购物车数据
      let car = this.getItem();
      if (car.length === 0) {
        this.carts = [];
        return;
      }
      // 2.改造商品id字符串， 准备发送请求
      let arr = [];
      car.forEach(v => {
        arr.push(v.id);
      });
      this.ids = arr.join(",");
      if (this.ids === "") {
        this.$toast("当前没有添加商品。 快去买买买");
        return;
      }
      // 3.利用获取到的字符串发送请求
      const { data: res } = await this.$http.get(
        `/api/goods/getshopcarlist/${this.ids}`
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取购物车数据失败，请联系管理员");
      }
      let cars = res.message;
      // 4.构造全新的购物车数组 (因为当前获取的数据不满足我们的需求)
      // 将获取到的商品数组和本地缓存中的数组合并为新数组(需要本地缓存中的count值， 方便计算数量)  数组的map方法会返回新数组.
      const newArr = cars.map((item, index) => {
        return { ...item, ...car[index] };
      });
      // 5.调用计算价格的方法
      this.setCar(newArr);
      this.carts = newArr;
    },
    // 封装计算总价格的方法
    setCar(newArr) {
      let totalPrice = 0;
      newArr.forEach(v => {
        if (v.selected) {
          totalPrice += v.count * v.sell_price;
        }
      });
      this.totalPrice = totalPrice.toFixed(2);
    },
    // 监听 步进器 数量变化
    ChangeInput(e, id) {
      // console.log(e,id);
      // 1.设置缓存中的数量
      // 先获取缓存中的数据
      let car = this.getItem();
      // 根据id查找对应的数据
      car.map(v => {
        if (v.id === id) {
          // 修改对应的值
          v.count = e;
        }
      });
      // 设置到缓存中
      this.setItem(car);
      // 2.设置到vuex
      this.addCart(car);
      // 3.重新计算价格
      this.setCar(car);
    },
    // 读取本地存储的数据
    getItem() {
      const data = localStorage.getItem("car");
      if (data !== null) {
        // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
        return JSON.parse(data);
      } else {
        return [];
      }
    },
    // 保存本地存储数据
    setItem(data) {
      localStorage.setItem("car", JSON.stringify(data));
    },
    // 下拉刷新
    onDownRefresh() {
      setTimeout(() => {
        // 清空购物车数组
        this.carts = [];
        // 重新发送请求
        this.getCart();
        this.$toast("刷新成功"); //弹出
        this.isDownLoading = false;
      }, 500);
    },
    // 删除当前商品
    removeGoods(id) {
      // 1.获取缓存中的数据
      let cars = this.getItem();
      // 2.删除缓存对应的数据
      const index = cars.findIndex(v => v.id === id);
      cars.splice(index, 1);
      // 3.删除vuex中的数据
      this.removeCart(id);
      // 3.设置缓存中的数据
      this.setItem(cars);
      // 4.重新发送请求
      this.getCart();
      // 5.重新计算价格
      this.setCar(cars);
    },
    // 点击按钮 去商品列表页面
    buyGoods(){
      this.$router.push('/goods/list')
    }
  },
  computed: {
    ...mapState(["car"])
  }
};
</script>

<style lang="less" scoped>
.van-card__content {
  justify-content: flex-start;
}
.van-card__price {
  display: inline-block;
  color: #f44;
  font-weight: 500;
  font-size: 12px;
}
.order_wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  span {
    em {
      font-style: normal;
      color: red;
    }
  }
  .van-button {
    margin-left: 10px;
  }
}
.removebtn {
  height: 100%;
}
.goodsImg {
  img {
    width: 100%;
    height: 250px;
  }
  .van-button {
    margin-top: 20px;
  }
}
</style>